<template>
  <div class="home">
    <NodeTree
      :title="title"
      :visibleModal.sync="visibleModal"
      :treeData="treeData"
    />
    <a-button type="primary" @click="batchStop('批量启用')">批量启用</a-button>
    <a-button @click="batchStart('批量停用')">批量停用</a-button>
    <div class="title">数据库操作</div>
    <div class="operation">
      <a-button @click="getDbData">连接数据库测试拿数据</a-button>
      <a-button @click="addDbData">增加一行数据</a-button>
      <a-button @click="subDbData">删除一行数据</a-button>
      <span class="num">当前数据总数：{{ total }}</span>
    </div>
    <table id="studentTable">
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>班级</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in tableData" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.class }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
// @ is an alias to /src
import NodeTree from "./nodeTree.jsx";
export default {
  name: "HomeView",
  components: {
    NodeTree,
  },
  data() {
    return {
      visibleModal: false,
      title: "批量启用",
      treeData: [
        {
          menuId: "1",
          menuName: "大学",
          children: [
            {
              menuId: "1-1",
              menuName: "大一",
            },
            {
              menuId: "1-2",
              menuName: "大二",
            },
            {
              menuId: "1-3",
              menuName: "大三",
              children: [
                {
                  menuId: "1-3-1",
                  menuName: "大三1班长度测试试试少时诵诗书少时诵诗书所",
                },
                {
                  menuId: "1-3-2",
                  menuName: "大三2班",
                },
                {
                  menuId: "1-3-3",
                  menuName: "大三3班",
                  children: [
                    {
                      menuId: "1-3-3-1",
                      menuName: "大三13班长度测试试试少时诵诗书少时诵诗书所",
                    },
                    {
                      menuId: "1-3-3-2",
                      menuName: "大三23班",
                    },
                    {
                      menuId: "1-3-3-3",
                      menuName: "大三33班",
                    },
                  ],
                },
              ],
            },
          ],
        },
        {
          menuId: "2",
          menuName:
            "高中长度测少时诵诗书少时诵诗书是撒是撒是撒是撒是撒是撒是撒",
        },
        {
          menuId: "3",
          menuName: "初中",
        },
        {
          menuId: "4",
          menuName: "小学",
        },
      ],
      tableData: [],
      total: 0,
    };
  },
  methods: {
    batchStop(text) {
      this.title = text;
      this.visibleModal = true;
    },
    batchStart(text) {
      this.title = text;
      this.visibleModal = true;
    },
    getDbData() {
      fetch("http://39.106.226.251:4000/dbData", {
        method: "POST",
        headers: {
          "Content-Type": "application/json", // 设置请求头
        },
        body: JSON.stringify({
          userId: "test",
        }),
      }).then(async (res) => {
        const data = await res.json();
        this.tableData = data.data;
        this.total = data.data.length;
        console.log(data, "数据库数据");
      });
    },
    addDbData() {
      fetch("http://39.106.226.251:4000/addDbData", {
        method: "POST",
        headers: {
          "Content-Type": "application/json", // 设置请求头
        },
        body: JSON.stringify({
          id: this.total + 1,
        }),
      }).then(async (res) => {
        const data = await res.json();
        // console.log(data, "新增数据结果");
        this.total++;
        this.getDbData();
      });
    },
    subDbData() {
      fetch("http://39.106.226.251:4000/suDbData", {
        method: "POST",
        headers: {
          "Content-Type": "application/json", // 设置请求头
        },
        body: JSON.stringify({
          id: this.total,
        }),
      }).then(async (res) => {
        const data = await res.json();
        // console.log(data, "删除数据结果");
        this.total--;
        this.getDbData();
      });
    },
  },
};
</script>
<style scoped lang="less">
/deep/ .ant-modal-body {
  max-height: 65vh;
  overflow-y: auto;
  .content {
    height: 400px;
    width: 100%;
    border: 1px #e8e8e8 solid;
    display: flex;
    color: #333;
    .item {
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      padding: 10px 0;
      .top {
        padding: 0 20px 10px 20px;
        border-bottom: 1px #e8e8e8 solid;
        height: 43px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .num {
          font-weight: 600;
        }
      }
      .item-content {
        flex-grow: 1;
        overflow-y: auto;
        .my-tree {
          padding: 0 20px;
          color: #333;
        }
        .menu-item {
          display: flex;
          align-items: center;
          padding: 4px 20px;
          justify-content: space-between;
          border-radius: 3px;
          margin: 6px;
          gap: 15px;
          .menu-item-name {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .anticon {
            color: #c91717;
            cursor: pointer;
            padding: 2px;
          }
        }
        .menu-item:hover {
          background-color: #eaf1ff;
        }
        .anticon:hover {
          background-color: #e8e8e8;
        }
      }
    }
    .item:first-child {
      border-right: 1px #e8e8e8 solid;
    }
  }
}
/deep/ .ant-modal-title {
  font-weight: 600;
}
/deep/ .ant-tree li .ant-tree-node-content-wrapper {
  max-width: 200px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.title {
  font-size: 16px;
}
.operation {
  display: flex;
  gap: 20px;
  align-items: center;
}
table {
  width: 600px;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 16px;
}
th,
td {
  border: 1px solid #ddd;
  padding: 8px;
}
th {
  background-color: #f2f2f2;
}
.num {
  color: red;
  font-size: 16px;
  font-weight: 600;
}
</style>
